import React,{Component} from 'react';
import './cart.scss';
import {
  Link
} from 'react-router-dom';
import InputNumber from 'components/widget/inputNumber/inputNumber.jsx';
import { Checkbox, message } from 'antd';
import { updateCartNum, delCartInfo } from 'api/cart.js';

export default class oneCart extends Component{
	constructor (props) {
		super(props)
		this.state = {
			checkedList: [],
			checkAll: false,
			myGoods: props.shopData.goods_info,
			touchStart: 0,
			touchEnd: 0
		}
	}
	onChange = (e, id) => { // 单个选项操作改变
		let checkedList = this.state.checkedList
		if (e.target.checked) {
			checkedList = [...checkedList, id]
		} else {
			checkedList.splice(checkedList.findIndex(item => item === id), 1)
		}
		this.setState({
			checkedList: checkedList,
			checkAll: checkedList.length === this.props.shopData.goods_info.length
		}, () => {
			this.changeCart()
		})
	}
	onCheckAllChange = (e) => { // 全选操作
		let all = []
		this.props.shopData.goods_info.forEach(item => {
			all.push(item.common_id)
		})
		this.setState({
			checkAll: e.target.checked,
			checkedList: e.target.checked ? all : []
		}, () => {
			this.changeCart()
		})
	}
	changeCart () { // 触发父组件，修改改变购物车内容
		let goods = []
		let cart_id = []
		this.state.myGoods.forEach((item) => {
			if (this.state.checkedList.includes(item.common_id)) {
				goods.push({
					common_id: item.common_id,
					goods_num: item.num,
					goods_price: item.goods_price
				})
				cart_id.push(item.cart_id)
			}
		})
		this.props.changeCheckList(goods, cart_id)
	}
	handleStart (event) { // touch 事件开始
		event.stopPropagation()
		this.setState({
			touchStart: event.touches[0].pageX
		})
  }
  handleMove (event) { // tocuh Move 触发
		event.stopPropagation()
    this.setState({
    	touchEnd: event.touches[0].pageX
    })
  }
  handleEnd (index) { // touch时间结束
  	let leftArys = this.state.lefts
    if (this.state.touchStart - this.state.touchEnd > 50) {
    	leftArys[index].left = '-4rem'
    	this.setState({
    		lefts: leftArys
    	})
    }
    if (this.state.touchEnd - this.state.touchStart > 50) {
    	leftArys[index].left = 0
    	this.setState({
    		lefts: leftArys
    	})
    }
  }
  _delCartInfo = (id) => {
  	delCartInfo({
  		cart_ids: [id]
  	}).then(res => {
  		if (res.code === 1) {
  			window.location.reload()
  		} else {
  			message.error(res.message, 1)
  		}
  	})
  }
	changeNumber (number, index) { // 数量修改
		let myGoods = this.state.myGoods
		updateCartNum({
			cart_id: this.props.shopData.goods_info[index].cart_id,
			goods_num: number
		}).then(() => {
			myGoods[index].num = number
			this.setState({
				myGoods: myGoods
			}, () => {
				this.changeCart()
			})
		})
	}
	componentWillMount () {
		let arys = []
		this.props.shopData.goods_info.forEach(() => {
			arys.push({
				left: 0
			})
		})
		this.setState({
			lefts: arys
		})
	}
	render() {
		return(
			<div className="cart_one__shop">
        <div className="cart_one__title">
          <Checkbox
						color='secondary'
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          ><Link to={
          	{
          		pathname: '/company',
          		state:{shop_id: this.props.shopData.shop_info.shop_id}
          	}
          }>
          	{this.props.shopData.shop_info.shop_name}
          	<i className="glyphicon glyphicon-right gongding"></i>
          </Link>
          </Checkbox>
        </div>
        {this.props.shopData.goods_info.map((item, index) => {
        	return (
        		<div className="cart_one__content" key={index}
              style={{left: this.state.lefts[index].left}}
              >
		        	<Checkbox
		        	onChange={(value) => this.onChange(value, item.common_id)}
            		checked={this.state.checkedList.includes(item.common_id)}
		        	></Checkbox>
							<Link to={
								{
									pathname: '/shopDetail',
									state: {id: item.common_id}
								}
							}>
								<img src={item.goods_image} />
							</Link>
		        	<div className='inline-block'
		        	onTouchMove={this.handleMove.bind(this)}
              onTouchStart={this.handleStart.bind(this)}
              onTouchEnd={this.handleEnd.bind(this, index)}>
		        		<div className='two-line'>
		        			{item.goods_name}
		        		</div>
		        		<div className='flex'>
		        			<div className='shop__price inline-block'>
		        				￥{item.goods_price}
		        			</div>
		        			<InputNumber className='inline-block' max={item.stock} shopNumber={item.num} changeNum={(value) => this.changeNumber(value, index)} />
		        		</div>
		        	</div>
		        	<div className='delete-btn' onClick={this._delCartInfo.bind(this, item.cart_id)}>
		        		删除
		        	</div>
		        </div>
        	)
        })}
    	</div>
		)
	}
}
